import React, {Component} from 'react';
import './index.less'
import PubSub from 'pubsub-js'
import {getBrandGoods} from "../../../../network/goods";
import {withRouter} from "react-router-dom";
class ShowSide extends Component {
    state = {
        side: 0,
        data: []
    }
    componentDidMount() {
        //订阅HeadLead兄弟组件发来的选中元素信息
        this.token = PubSub.subscribe('geiSideName', (msg,data) => {
            let gid;
            switch (data){
                case '苹果':
                    gid = 1
                    break;
                case '华为':
                    gid = 2
                    break;
                case '小米':
                    gid = 3
                    break;
                case '配件':
                    gid = 4
                    break;
                default:
                    gid = 1;
            }
            this.setState({
                side: gid
            },async () => {
                //获取分类id后发送ajax请求获得相关品牌数据
                let result = await getBrandGoods(this.state.side)
                if(result.code === 200){
                    this.setState({
                        data: result.data
                    },() => {
                        this.menu.style.height = '150px'
                    })
                }
            })
        });
    }

    componentWillUnmount() {
        //组件卸载后取消订阅消息
        PubSub.unsubscribe(this.token);
    }

    render() {
        return (
            <div className='showSide' ref={node => this.menu = node} onMouseLeave={this.disapear}>
                <div className="container">
                    <ul className='shoSideList'>
                        {
                            this.state.data.map(item => {
                                return <li key={item.gid} onClick={this.goDetail(item.gid)}>{item.gtitle}</li>
                            })
                        }
                    </ul>
                </div>

            </div>
        );
    }
    goDetail = (id) => {
        return () => {
            this.props.history.push(`/detail?gid=${id}`)
        }
    }
    disapear = () => {
        this.menu.style.height = '0px'
    }
}

export default withRouter(ShowSide);